<!-- 内部法人管理-导入失败-编辑模态框 -->
<template>
<div>
    <el-dialog :title="title" :visible.sync="show" width="70%" @close="$emit('update:visible', false)">
        <el-form :rules="rules"  ref="editform" :model="editform" label-width="120px" label-position="left">
            <el-row >
                <el-col :span="10">
                    <el-form-item label="公司名称：" prop="companyName">
                        <el-input  v-model.trim="editform.companyName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="纳税人识别号：" prop="companyTaxpayer">
                        <el-input  v-model.trim="editform.companyTaxpayer" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话：" prop="companyPhone">
                        <el-input  v-model.trim="editform.companyPhone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="1">&nbsp;</el-col>
                <el-col :span="13">
                    <el-form-item label="公司地址：" class="posterurl">
                        <div  class="flex-box">
                            <el-form-item prop="companyProvince">
                                <el-select v-model.trim="editform.companyProvince"  placeholder="省" @change="loadCity">
                                   <el-option 
                                   v-for="(item,index) in provinceOptions" 
                                   :key="index" 
                                   :label="item.province" 
                                   :value="item.province"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="companyCity">
                                <el-select v-model.trim="editform.companyCity"  @change="loadArea" placeholder="市">
                                    <el-option
                                    v-for="item in cityOptions"
                                    :key="item.cityId"
                                    :label="item.city"
                                    :value="item.city">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="companyCounty">
                                <el-select v-model.trim="editform.companyCounty" placeholder="区/县">
                                    <el-option
                                    v-for="item in areaOptions"
                                    :key="item.areaId"
                                    :label="item.area"
                                    :value="item.area">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item style="width:100%" prop="companyAddress">
                                <el-input v-model.trim="editform.companyAddress" autocomplete="off"></el-input>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item label="法定代表人：" prop="companyRepresentative">
                        <el-input  v-model.trim="editform.companyRepresentative" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮政编码：" prop="companyPostalcode">
                        <el-input  v-model.trim="editform.companyPostalcode" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
             <el-form-item  label="备注：" prop="companyRemark">
                    <el-input  type="textarea" :rows='6' placeholder="请输入内容" v-model.trim="editform.companyRemark" autocomplete="off"></el-input>
                </el-form-item>
		</el-form>
          <template slot="footer">
            <el-button @click="show = false">取 消</el-button>
            <el-button type="primary" @click="save('editform')">确 定</el-button>
        </template>
    </el-dialog>
    </div>
</template>
<script>


import api from '@/api/apiPath'
export default {
    components: {
    
    },
	data () {
		return {
            title:"内部法人单位信息",
            show:false,
            provinceOptions:[],
            cityOptions:[],
            areaOptions:[],
            rules:{//验证
                companyName:[
                    {required: true, trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            if (!value) {
                                    return callback(new Error('请输入公司名称'));
                            }
                            if(value.length>30){
                                    return callback(new Error('公司名称长度不能大于30'));
                            }
                            callback();
                        }
                    }
                ],
                
                companyTaxpayer:[
                     { required: true, trigger: ['blur', 'change'] ,validator:(rule, value, callback)=>{
                            const reg =  /^[0-9A-Z]{15,}$/;
                            if(!value) return callback(new Error("请输入纳税人识别号"))
                            if((value.length !=15 && value.length !=17 && value.length !=18 && value.length !=20) || !reg.test(value))
                                return callback(new Error("请输入正确格式的纳税人识别号"))
                          
                            callback()
                            
                        } 
                    },
                ],
                companyRepresentative:[
                    { required: true, message: '请输入法定代表人', trigger: ['blur', 'change']  },
                    { min: 0, max: 20, message: '法定代表人长度不能大于20', trigger: ['blur', 'change'] }
                ],
                companyPhone:[
                    { required: true, trigger: ['blur', 'change'] ,validator:(rule, value, callback)=>{
                            const reg = /^0\d{2,3}-?\d{7,8}$/;
                            if(!value){
                                callback(new Error("请输入联系电话"))
                            }else if(!reg.test(value)){
                                callback(new Error("请输入正确的电话号码"))
                            }else{
                                callback()
                            }
                        } 
                    }
                ],
                companyPostalcode:[
                    {required: false,trigger: ['blur', 'change'] ,validator: (rule, value, callback) => {
                            const reg = /^[0-9]{6}$/g;
                            if(!value) return callback();
                            if(!reg.test(value)){
                                callback(new Error("请输入正确的邮政编码"))
                            }else{
                                callback();
                            }
                        }
                    }
                ],
                companyRemark:[
                    {required: false, min: 0, max: 100, message: '长度不得超过100个字符', trigger: ['blur', 'change'] },
                ],
                companyProvince: [
                   { required: true, message: '请选择省份', }
                ],
                companyCity: [
                   { required: true, message: '请选择城市', }
                ],
                companyCounty: [
                   { required: true, message: '请选择区县',  }
                ],
                companyAddress: [
                    { required: true, message: '请输入详细地址', trigger: ['blur', 'change']  },
                    { min: 0, max: 50, message: '长度不得超过50个字符', trigger: ['blur', 'change'] }
                ],

            },
            
        }
    },
    props:['visible','editform'],
    watch:{
        visible(o,n){
            if(o){
                this.show = true;
            }else{
                  this.show = false;
            }
        }
    },
    
    methods:{
          save(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    _this.show = false;
                    _this.$emit('onSave',this.editform)
                } else {
                    return false;
                }
            });
        },
        //获取省
        loadprovinces(){
             this.axios.get(api.GETPROVINCES).then(res => {
                    if (res.data.code == 200) {
                       this.provinceOptions = res.data.data;
                       
                    }
                })
        },
        //获取市
        loadCity(province){
            let thisObj = this.provinceOptions.find(item=>{
                return province === item.province;
            })
            this.$set(this.editform,'companyCity',null);
            this.$set(this.editform,'companyCounty',null);
            this.axios.get(`${api.GETCITY}/${thisObj.provinceid}`).then(res => {
                    if (res.data.code == 200) {
                       this.cityOptions = res.data.data.cityList;
                    }
                })
        },
       //获取区
        loadArea(city){
             let thisObj = this.cityOptions.find(item=>{
                return city === item.city;
            })
            this.editform.companyCityCode = thisObj.cityId;
            this.$set(this.editform,'companyCounty',null);
            this.axios.get(`${api.GETAREA}/${thisObj.cityId}`).then(res => {
                    if (res.data.code == 200) {
                       this.areaOptions = res.data.data.cityArealist;
                       
                    }
            })
        }
    },
    
	created () {
      this.loadprovinces();  
    },
	destroyed() {
		
	},
	filters: {

	}
}

</script>

<style lang="stylus" >
     .flex-box{
        display:flex;
    }
    .flex-box>*{
        margin-right :10px;
    }
    .flex-box>*:last-child{
         margin-right:0;
    }
     .posterurl .el-form-item__label:before{
        content: '*';
        color: #f56c6c;
        margin-right: 4px;
    }
</style>
